<template>
  <div class="home">
    <div class="header">
      <h1>MBTI性格测试</h1>

      <div  class="steps">
        <div class="step-item" v-for="(step,index) in steps" :key="index">

          <p class="icon future" v-show="partIndex<index">
            <span>{{index+1}}</span>
          </p>
          <p class="icon current" v-show="partIndex===index">
            <span>{{index+1}}</span>
          </p>

          <p class="icon last" v-show="partIndex>index">
            <i class="pi pi-check"></i>
          </p>

          <p class="item-label">{{ step.label }}</p>
          <p class="item-progress">
            {{partIndex < index?0:subject.part[index].problemIndex + 1}}/{{ subject.part[index].problem.length }}
          </p>
        </div>

      </div>

      <ProgressBar class="progress" :value="progressValue"/>
<!--      <p>{{ subject.part[partIndex].tip }}</p>-->
    </div>
    <div class="main-content">
      <div class="main">
        <h2>{{ problem.title }}</h2>
        <Button class="p-button-lg"
                :label="problem.option[0].label"
                :class="problem.choose===0?'':'p-button-outlined'"
                @click="problem.choose=0;next()"/>
        <Button class="p-button-lg"
                :class="problem.choose===1?'':'p-button-outlined'"
                :label="problem.option[1].label"
                @click="problem.choose=1;next()"/>
        <div class="buttons">
          <Button class="p-button-warning p-button-lg left-button"
                  v-show="progressValue!==1"
                  label="上一题"
                  @click="last"/>
          <Button class="p-button-lg right-button"
                  v-show="progressValue!==100&& currentIndex<maskIndex"
                  label="下一题"
                  @click="next"/>
          <Button class="p-button-lg right-button"
                  v-show="progressValue===100"
                  label="查看结果"
                  @click="getResult"/>

        </div>

      </div>
    </div>
    <div class="footer">
      <p>完成测试后，您将获得</p>

      <ul>
        <li>获取您的4字母类型测试结果</li>
        <li>知悉您的偏好优势和类型描述</li>
      </ul>
      <p>
        所有内容基于卡尔·荣格 (Carl Jung) 和伊莎贝尔·布里格斯·迈尔斯 (lsabel Briggs Myers) 的MBTI理论实证
      </p>

    </div>

  </div>

</template>
<script>
import ProgressBar from 'primevue/progressbar';
import Button from 'primevue/button';
import subject from '@/assets/subject.json'
import router from "@/router";

export default {
  data() {
    return {
      subject,
      partIndex: 0,
      maskIndex: 0,
      currentIndex: 0,
      steps: [
        { label: '描绘题A', color: '#9C27B0'},
        { label: '选词题A', color: '#673AB7'},
        { label: '描绘题B', color: '#FF9800'},
        { label: '选词题B', color: '#607D8B'}
      ],
      answerMap: null,
    }
  },
  computed: {
    part() {
      return this.subject.part[this.partIndex]
    },
    problem() {
      return this.part.problem[this.part.problemIndex]
    },
    progressValue() {
      if (!this.subject.total) {
        return 0
      }
      return Math.floor((this.maskIndex+1) * 100 / this.subject.total)
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.answerMap = new Map()
    },
    last() {
      if (this.part.problemIndex === 0) {
        if (this.partIndex === 0) {
          return;
        }
        this.partIndex--;
        this.currentIndex--
        return
      }
      this.part.problemIndex--
      this.currentIndex--
    },
    next() {

      if (this.part.problemIndex === this.part.problem.length - 1) {
        if (this.partIndex === this.subject.part.length - 1) {
          return;
        }
        this.partIndex++;
        this.currentIndex++
        if (this.currentIndex > this.maskIndex) {
          this.maskIndex++
        }

        return
      }
      this.part.problemIndex++
      this.currentIndex++
      if (this.currentIndex > this.maskIndex) {
        this.maskIndex++
      }
    },

    getResult() {
      this.answerMap.set('E', 0);
      this.answerMap.set('I', 0);
      this.answerMap.set('S', 0);
      this.answerMap.set('N', 0);
      this.answerMap.set('T', 0);
      this.answerMap.set('F', 0);
      this.answerMap.set('J', 0);
      this.answerMap.set('P', 0);

      for (const part of this.subject.part) {
        for (const problem of part.problem) {
          if (problem.choose === 0 || problem.choose === 1) {
            let chooseItem = problem.option[problem.choose].answer
            let num = this.answerMap.get(chooseItem)
            num++
            this.answerMap.set(chooseItem, num)
          }
        }
      }
      console.log(this.answerMap)

      const obj = [...this.answerMap.entries()].reduce((obj, [key, value]) => (obj[key] = value, obj), {})

      router.push({name: 'result', query: obj})


    }
  },
  components: {
    ProgressBar, Button
  }
}
</script>
<style lang="scss">
.home {
  background-color: #f2f2f2;

  .header {
    width: 100%;
    height: 321px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;

    h1 {
      font-size: 40px;
      line-height: 40px;
      color: #41464b;
      // font-weight: bold;
    }

    .steps {
      width: 60%;
      height: 130px;
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      .step-item{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
        .icon{

          width: 70px;
          height: 70px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50px;
          i,span{
            line-height: 70px;
          }
        }
        .last{
          background-color:  #13ce66;
          color:#fff;
        }
        .future{
          background-color: #e5e5e5;
          color:  #999;
        }
        .current{
          background-color: #673AB7;
          color:#fff;
        }
        .item-label{
          font-size: 18px;
          line-height:18px;
          color:  #999;
        }
        .item-progress{
          font-size: 18px;
          line-height:18px;
          color:  #999;
        }

      }

    }

    .progress {
      width: 80%;
    }

  }

  .main-content {
    background-color: white;

    .main {
      margin-left: 20%;
      margin-right: 20%;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      h2 {
        font-size: 27px;
        line-height: 27px;
        color: #41464b;
        font-weight: bold;
      }

      .buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .left-button {
          width: 200px;
        }

        .right-button {
          width: 400px;
        }

      }
    }
  }

  .footer {
    padding: 10px 0;
    height: 221px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
  }
}

</style>
